<template>
<div>
  <refEx></refEx>
  <toref></toref>
  <torefs></torefs>
  <torefsEx></torefsEx>
</div>
</template>

<script>
import {ref, reactive} from 'vue'
import refEx from './components/ref-ex'
import toref from "@/components/toref";
import torefs from './components/torefs';
import torefsEx from './components/torefsEx'
export default {
  name: 'App',
  components: {
    refEx,
    toref,
    torefs,
    torefsEx
  },
  mounted() {
    console.log('app')
    // 普通数据
    let re = ref(123)
    console.log(re, re.value)
    // 对象 参数
    let reactiveParam = reactive({a:1, b:"5"})
    console.log(reactiveParam)
    console.log(reactiveParam.a, reactiveParam.b)
    // 对象修改
    let obj = {name: 'a', id:"12huang"}
    let reactiveObj = reactive(obj);
    console.log(reactiveObj, reactiveObj.name)
    reactiveObj.name="shelley";
    console.log(reactiveObj)
    //对象赋值

    let objSet = {name: '1', id:"id"};
    let objSetReactive = reactive({});
    Object.assign(objSetReactive, {...objSet})
    console.log("objSetRective", objSetReactive, objSetReactive.name)

    //数组
    const state = reactive({
      arr: []
    });
    state.arr = [1, 2, 3];
    console.log(state)

    const state1 = ref([]);
    state1.value=[1,2,3];
    console.log(state1)

    const state2 = reactive([]);
    state2.push(...[1,2,3]);
    console.log(state2)

    /**
     * RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: 123, _value: 123}
     dep: undefined
     __v_isRef: true
     _rawValue: 123
     _shallow: false
     _value: 123
     value: (...)
     [[Prototype]]: Object
     */
    console.log('app')

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
